<!-- 六芒星页面 -->
<template>
  <view class="page" :style="{ backgroundImage: `url(${counterStore.bg_img})` }">
    <!-- 返回按钮 -->
    <view class="navbar" :style="{ paddingTop: safeAreaInsets?.top + 'px' }">
      <view class="back-icon" @tap="goBack">
        <text class="iconfont">←</text>
      </view>
      <text class="page-title">六芒星</text>
    </view>

    <view class="content">
      <!-- 牌阵说明 -->
      <view class="spread-info">
        <image class="avatar" src="/static/images/avatar.png" mode="aspectFit" />
        <text class="description">六芒星牌阵可用于任何领域，如恋爱婚姻、事业发展、场景判断等。六芒星牌阵会帮你把事情的来龙去脉了解清楚，在此基础上才能选择出一个好的解决方法。</text>
      </view>

      <!-- 问题示例 -->
      <view class="example-section">
        <text class="section-title">问题示例：</text>
        <view class="example-list">
          <text>这段感情问题的根源是什么？未来会如何？</text>
          <text>我在当下业面临的状况如何？我该采取什么策略推进职业发展？</text>
        </view>
      </view>

      <!-- 牌阵说明 -->
      <view class="spread-layout">
        <image class="avatar" src="/static/images/avatar.png" mode="aspectFit" />
        <view class="layout-description">
          <text>六芒星结构上的两端顶点则分别代表着天、地，其余四个顶点代表的是水、火、风、土象星座。</text>
          <view class="card-meanings">
            <text>第一位：代表着过去，指已经发生的事情。</text>
            <text>第二位：代表着现在，目前正在进行当中的事。</text>
            <text>第三位：代表着未来，事情并未发生的情况，多表预测。</text>
            <text>第四位：指具体事情将会出现的原因。</text>
            <text>第五位：影响着占卜问题事情的周围环境因素。</text>
            <text>第六位：事情的一些解决办法、对应办法。</text>
            <text>第七位：表示问卜者主观的想法。</text>
          </view>
        </view>
      </view>

      <!-- 开始按钮 -->
      <view class="bottom-tip">
        <image class="avatar" src="/static/images/avatar.png" mode="aspectFit" />
        <text>接下来，请集中注意力，心里默念你的问题，凭你的直觉抽取7张塔罗牌。</text>
      </view>

      <view class="button-group">
        <button class="action-button" @tap="navigateToAIReading">自助解牌</button>
        <button class="action-button primary" @tap="startDrawing">开始抽牌</button>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import {useCounterStore} from '@/store/counter'

const counterStore = useCounterStore()
// 获取安全区域
const { safeAreaInsets } = uni.getSystemInfoSync()

// 返回上一页
const goBack = () => {
  uni.navigateBack({
    fail: () => {
      uni.switchTab({
        url: '/pages/index/index'
      })
    }
  })
}

// 跳转到卡牌选择页面
const startDrawing = () => {
  uni.navigateTo({
    url: '../card-select/card-select?count=7&spread=hexagram',
    fail: (err) => {
      console.error('跳转失败:', err)
      uni.showToast({
        title: '页面跳转失败',
        icon: 'none'
      })
    }
  })
}

// 跳转到AI解牌页面
const navigateToAIReading = () => {
  uni.navigateTo({
    url: '../payment/payment',
    fail: (err) => {
      console.error('跳转失败:', err)
      uni.showToast({
        title: '页面跳转失败',
        icon: 'none'
      })
    }
  })
}
</script>

<style scoped>
.page {
  min-height: 100vh;
  background: linear-gradient(180deg, #1a1a2e 0%, #16213e 100%);
  color: #fff;
}

.navbar {
  position: relative;
  display: flex;
  align-items: center;
  height: 12vw;
  background: rgba(26, 26, 46, 0.8);
  backdrop-filter: blur(10px);
}

.back-icon {
  position: absolute;
  left: 4vw;
  width: 8vw;
  height: 8vw;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5vw;
}

.page-title {
  flex: 1;
  text-align: center;
  font-size: 4vw;
  font-weight: bold;
}

.content {
  padding: 4vw;
}

.spread-info, .example-section, .spread-layout, .bottom-tip {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3vw;
  padding: 4vw;
  margin-bottom: 4vw;
}

.avatar {
  width: 12vw;
  height: 12vw;
  border-radius: 50%;
  margin-right: 3vw;
}

.description {
  flex: 1;
  font-size: 3.2vw;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.9);
}

.section-title {
  display: block;
  font-size: 3.6vw;
  font-weight: bold;
  margin-bottom: 2vw;
}

.example-list text {
  display: block;
  font-size: 3.2vw;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 2vw;
}

.card-meanings {
  margin-top: 3vw;
}

.card-meanings text {
  display: block;
  font-size: 3.2vw;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.9);
}

.button-group {
  display: flex;
  gap: 3vw;
  margin-top: 6vw;
}

.action-button {
  flex: 1;
  height: 11vw;
  line-height: 11vw;
  text-align: center;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2vw;
  font-size: 3.2vw;
  color: #fff;
}

.action-button.primary {
  background: #27ba9b;
}

.spread-info, .example-section, .spread-layout, .bottom-tip {
  display: flex;
  align-items: flex-start;
}

.layout-description {
  flex: 1;
  font-size: 3.2vw;
  line-height: 1.6;
}
</style> 